<template>
  <el-row style="margin-top: 50px">
    <el-col :span="12">
      <el-card title="输入区" shadow="never">
        <el-form :model="form" label-width="auto" ref="formRef"  style="max-width: 100%">
          <el-row>
            <el-col :span="24">
              <el-form-item label="地址" prop="address">
                <el-input v-model="form.address" placeholder="请输入地址"/>
              </el-form-item>
              <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入姓名"/>
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <el-input v-model="form.sex" placeholder="请输入性别"/>
              </el-form-item>
              <el-form-item label="打印时间" prop="printTime">
                <el-date-picker
                    v-model="form.printTime"
                    type="date"
                    placeholder="请选择打印时间"
                    format="YYYY年MM月DD日"
                    value-format="YYYY年MM月DD日"
                />
              </el-form-item>
              <el-form-item label="操作员" prop="handleUser">
                <el-input v-model="form.handleUser" placeholder="请输入操作员"/>
              </el-form-item>
              <el-form-item label="收款员" prop="cashier">
                <el-input v-model="form.cashier" placeholder="请输入收款员"/>
              </el-form-item>

            </el-col>
            <el-col :span="24">
              <el-form-item label="明细" prop="listData">
                <el-row>
                  <el-col :span="24">
                    <el-button type="primary" @click="doAdd">添加</el-button>
                  </el-col>
                </el-row>
                <el-table :data="form.listData">
                  <el-table-column label="标题">
                    <template #default="scope">
                      <el-input v-model="scope.row.title" placeholder="请输入标题"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="项目">
                    <template #default="scope">
                      <el-input v-model="scope.row.project" placeholder="请输入项目"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="价格">
                    <template #default="scope">
                      <el-input v-model="scope.row.price" placeholder="请输入价格"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template #default="scope">
                      <el-button type="danger" @click="form.listData.splice(scope.$index, 1)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row>
          <el-col :span="24" style="display: flex; justify-content: flex-end;">
            <el-button type="danger" @click="clearForm">清空</el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card title="预览区域" shadow="never">
        <div style="width: 400px;margin: 50px auto;font-size: 15px;border: #999999 1px solid" id="printBox">
          <div style="margin-left: 30px">
            {{form.address}}
          </div>
          <div style="display: flex;justify-content: flex-start;align-content: center">
            <div style="margin-left: 20px">{{form.name}}</div>
            <div style="margin-left: 40px">{{form.sex}}</div>
          </div>
          <div style="height: 100px">
            <div v-for="(item,index) in form.listData" style="display: flex;justify-content: space-around;align-content: center">
              <div>
                {{item.title}}
              </div>
              <div>
                {{item.project}}
              </div>
              <div>
                {{item.price}}
              </div>
            </div>
          </div>
          <div style="display: flex;justify-content: flex-start">
            <div style="margin-left: 20px">
              {{form.printTime}}
            </div>
            <div style="margin-left: 40px">
              {{form.handleUser}}
            </div>
            <div style="margin-left: 40px">
              {{form.cashier}}
            </div>
          </div>
        </div>
      </el-card>
      <el-row style="margin-top: 40px">
        <el-col :span="24" style="display: flex;justify-content: flex-end">
          <el-button type="primary" style="margin-right: 100px" @click="print">打印</el-button>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">

import {reactive, ref} from "vue";

const form = reactive({
  address: '',
  name: '',
  sex: '',
  printTime: '',
  handleUser: '',
  cashier: '',
  listData: []
});

const formRef = ref();

const clearForm = () => {
  formRef.value.resetFields();
}

const doAdd = () => {
  const item = {
    title: "",
    project: "",
    price: "",
  }
  form.listData.push(item)
}

const print = () => {
  const content = document.getElementById('printBox')!.innerHTML;

  const printFrame = document.createElement('iframe');
  printFrame.style.position = 'absolute';
  printFrame.style.width = '0';
  printFrame.style.height = '0';
  printFrame.style.border = 'none';
  document.body.appendChild(printFrame);

  const doc = printFrame.contentWindow?.document;
  if (doc) {
    doc.open();
    doc.write(`      <html>
        <head>
          <title>打印内容</title>
          <style>
            @page {
              size: auto;
              margin: 0mm !important;
            }

            body {
              margin: 0;
              padding: 0;
              font-family: Arial, sans-serif;
            }

            /* 只重置 body 的 margin/padding，保留内部结构样式 */
          </style>
        </head>
        <body>
          ${content}          <script>
            window.onload = function () {
              window.focus();
              window.print();
            };
            window.onafterprint = function () {
              window.close();
            };
          <\/script>
        </body>
      </html>
    `);
    doc.close();
  }
};
</script>

<style >
@media print {
  @page {
    margin-top: 0;
    margin-bottom: 0;
  }

  body {
    -webkit-print-color-adjust: exact; /* 强制打印背景颜色或图片 */
    font-family: Arial, sans-serif;
    padding: 0;
    margin: 0;
  }
}
</style>
